<template>
  <div class="workflow-container">
    <div class="node-box">
      <div class="line-end-arrow"></div>
      <div class="title" :class="flowData.type">
        <span>{{ flowData.name }}</span>
      </div>
      <div class="content">
        <div class="content-text">{{ flowData.nodeName }}</div>
      </div>
    </div>
    <div class="add-node-btn-box">
      <div class="add-node-btn"></div>
    </div>
  </div>
  <Workflow v-if="flowData.childNode" :flow-data="flowData.childNode" />
  <div v-else class="workflow-container">
    <div class="node-box node-end">
      <div class="line-end-arrow"></div>
      {{ translate('流程结束') }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Workflow from './flow.vue'
  import { translate } from '@/i18n'
  defineProps({
    flowData: {
      type: Object,
      default: () => {
        return {
          name: translate('提交人'),
          type: 'start',
          nodeName: translate('发起人(申请人本人)'),
          inputname: translate('发起人'),
          properties: {
            member: [],
            approvalType: {
              name: translate('申请人本人'),
              value: '2',
              checked: true,
            },
          },
          childNode: {
            name: '审批人',
            type: 'approver',
            nodeName: '物流-赛秀、',
            properties: {
              member: [
                {
                  UserId: 'fb721296-0df5-4733-9971-f6f457cb9929',
                  Code: '402',
                  Account: '402',
                  RealName: '物流-赛秀',
                  Spell: null,
                  Gender: '1',
                  Mobile: '1264871',
                  Telephone: null,
                  Email: null,
                  CompanyId: '532E37B6-00DC-4ED2-A32C-4F66A8D8C9F7',
                  CompanyName: '深圳赛秀技术有限公司',
                  DepartmentId: 'AA6ADAB3-40D0-4493-9A00-F4368178F781',
                  DepartmentName: '工程部',
                  Enabled: 0,
                  LogOnCount: null,
                  LastVisit: null,
                  CreateUserId: '8ea9a1a2-c256-42c5-8c99-5c4874f69a2b',
                  Remark: null,
                },
              ],
              approvalType: { name: '指定成员', value: '0', checked: true },
            },
            inputname: '部门负责人',
            childNode: {
              name: '审批人',
              type: 'approver',
              nodeName: '测试账号、',
              properties: {
                member: [
                  {
                    UserId: 'edf45e67-1b25-440f-8be6-008d2c34e249',
                    Code: '36363',
                    Account: '666666',
                    RealName: '测试账号',
                    Spell: null,
                    Gender: '2',
                    Mobile: '13636363666',
                    Telephone: null,
                    Email: null,
                    CompanyId: '87F10CDB-BC10-424B-AC8C-DEC023C036E0',
                    CompanyName: null,
                    DepartmentId: 'BDFFC2DC-C8E5-4B1F-BFAB-691CC01E13FB',
                    DepartmentName: '1',
                    Enabled: 1,
                    LogOnCount: null,
                    LastVisit: null,
                    CreateUserId: null,
                    Remark: null,
                  },
                ],
                approvalType: { name: '指定成员', value: '0', checked: true },
              },
              inputname: '部门总经理',
              childNode: {
                name: '抄送人',
                type: 'notifier',
                nodeName: 'zhang002、',
                properties: {
                  member: [
                    {
                      UserId: 'edd57ce1-9e64-4f44-b606-cbd033edf116',
                      Code: '003',
                      Account: 'zhang002',
                      RealName: 'zhang002',
                      Spell: null,
                      Gender: '0',
                      Mobile: '13636363636',
                      Telephone: null,
                      Email: null,
                      CompanyId: '18501808-6309-49D3-B094-C96445349292',
                      CompanyName: null,
                      DepartmentId: '184495CF-A541-433B-9430-4C9DCC17B652',
                      DepartmentName: '研发部',
                      Enabled: 1,
                      LogOnCount: null,
                      LastVisit: null,
                      CreateUserId: '5bd64e26-dd44-4e60-8a63-64f45288237f',
                      Remark: null,
                    },
                  ],
                  approvalType: { name: '指定成员', value: '0', checked: true },
                },
                inputname: '分管领导',
                contentValid: true,
                validate: true,
                parent: 2,
                current: 3,
                end: 'end',
                node: 'end',
              },
              contentValid: true,
              validate: true,
              parent: 1,
              current: 2,
            },
            contentValid: true,
            validate: true,
            parent: 0,
            current: 1,
          },
          contentValid: true,
          validate: true,
          current: 0,
        }
      },
    },
  })
</script>

<style lang="scss" scoped>
  .workflow-container {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    .node-box {
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      width: 240px;
      min-height: 92px;
      box-sizing: border-box;
      // cursor: pointer;
      z-index: 10;

      .line-end-arrow {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 4px;
        border-style: solid;
        border-width: 8px 5px 4px;
        border-color: #dbdbdb transparent transparent;
      }

      .title {
        position: relative;
        display: flex;
        align-items: center;
        height: 36px;
        border-radius: 4px 4px 0 0;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        padding: 0 14px;
        background-color: #e2f0ff;
        color: #3d91eb;

        span {
          display: inline-block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          max-width: 76%;
        }

        &.start {
          background-color: #f7e9e9;
          color: red;
        }

        &.approver {
          background-color: #e2f0ff;
          color: #3d91eb;
        }

        &.notifier {
          background-color: #fff4e0;
          color: orange;
        }
      }

      .content {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 16px 14px;

        .content-text {
          flex: 1;
          font-size: 14px;
          color: #141414;
          word-break: break-all;
          line-height: 1.8;
        }
      }
    }
    .node-end {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      min-height: 56px;
      height: 56px;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
      // cursor: default;
      font-size: 15px;
      border-radius: 4px;
    }
    .add-node-btn-box {
      width: 240px;
      display: inline-flex;
      flex-shrink: 0;
      position: relative;

      .add-node-btn {
        user-select: none;
        width: 240px;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 1;
      }

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 2px;
        // z-index: -1;
        margin: auto;
        width: 2px;
        height: 100%;
        background-color: #dbdbdb;
      }
    }
  }
</style>
